<template>
  <nav class="nav-bar flex-only">
    <div>
      <router-link to="/">首页</router-link> |
      <router-link to="/about">关于</router-link> |
      <router-link to="/message">留言</router-link>
    </div>
    <div class="search-bar">
      <input type="text" placeholder="输入内容按下回车搜索" />
    </div>
  </nav>
</template>

<style lang="less">
nav {
  width: 100vw;
  margin: auto;
  position: relative;

  a {
    font-weight: bold;
    color: #2c3e50;
    text-decoration: none;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
  .search-bar {
    position: absolute;
    right: 20px;
  }
}
</style>